<template>
  <div class="positRel">
    <div class="attention-wrap">
      <div class="title-box">找专家</div>
      <div class="attention-content">
        <div class="attention-list">
          <!-- 排序 -->
          <div class="sort">
            <Input
              v-model="params.keyword"
              icon="ios-search-outline"
              clearable
              placeholder="请输入..."
              style="width: 20%"
              @on-click="getExpertList"
              @on-search="getExpertList"
              @on-clear="getExpertList"
              search
            />
            <div class="sort-text">
              <div
                class="tabs-btn"
                :class="isList == 1 ? 'activeStyle' : ''"
                @click="handleShow(1)"
              >
                <!-- <img src="@/assets/course/showcase.png" alt="" /> -->
                <Icon type="ios-apps-outline" size="20" />
                橱窗
              </div>
              <div
                class="tabs-btn"
                :class="isList == 2 ? 'activeStyle' : ''"
                @click="handleShow(2)"
              >
                <Icon type="ios-list" size="22" />
                列表
              </div>
              <div
                class="sort-row"
                v-for="(item, index) in screening"
                :key="item.name"
                @click="setSort(index)"
              >
                <span
                  class="title"
                  :style="current == index ? 'color:#FD5151' : 'color:#63676E'"
                  >{{ item.name }}</span
                >
                <img
                  class="sort-img"
                  :src="
                    current == index
                      ? require('@/assets/base/sorted.png')
                      : require('@/assets/base/sort.png')
                  "
                  alt=""
                />
              </div>
            </div>
          </div>
          <div v-if="expertList.length > 0">
            <!-- 橱窗 -->
            <ul class="mycourse-list" v-show="isList == 1">
              <li
                class="mycourse-item"
                v-for="item in expertList"
                :key="item.id"
                @click="toExpertDetails(item.id)"
              >
                <div v-if="!item.face" class="mycourse-img">
                  <img
                    src="@/assets/images/default_bg.png"
                    style="width: 100%; height: 100%"
                    alt=""
                  />
                </div>

                <div
                  v-else
                  class="mycourse-img"
                  :style="`background-image:url(${item.face})`"
                ></div>

                <div class="mycourse-info">
                  <span class="text">{{ item.realName }}</span>
                  <div class="score">
                    <img
                      src="@/assets/online_consulting/score.png"
                      alt=""
                      class="score-face"
                    />
                    <span>{{ item.scoreAvg }}</span>
                  </div>
                </div>
                <div class="price-box">
                  <span>
                    在线问诊
                    <span class="price">¥ {{ item.consultPrice || "0.0" }}</span>
                  </span>
                  <span>
                    线下预约
                    <span class="price">¥ {{ item.registerPrice || "0.0" }}</span>
                  </span>
                </div>
                <p class="infor">简介 {{ item.introduction || "暂无" }}</p>

                <p class="infor">擅长：{{ item.domain || "暂无" }}</p>
              </li>
            </ul>
            <!-- 列表模式 -->
            <div v-show="isList == 2">
              <div
                class="attention-card"
                v-for="(item, index) in expertList"
                :key="index"
                @click="toExpertDetails(item.id)"
              >
                <div v-if="!item.face" class="head-face">
                  <img
                    src="@/assets/images/default_bg.png"
                    style="width: 100%; height: 100%"
                    alt=""
                  />
                </div>
                <div
                  class="head-face"
                  v-else
                  :style="`background-image:url(${item.face})`"
                ></div>

                <div class="attention-info">
                  <div class="head-box">
                    <p class="name">{{ item.realName }}</p>
                    <div class="score">
                      <img
                        src="@/assets/online_consulting/score.png"
                        alt=""
                        class="score-face"
                      />
                      <span>{{ item.scoreAvg }}</span>
                    </div>
                    <span>
                      在线问诊
                      <span class="price"
                        >¥ {{ item.consultPrice || "0.0" }}</span
                      >
                    </span>
                    <span>
                      线下预约
                      <span class="price"
                        >¥ {{ item.registerPrice || "0.0" }}</span
                      >
                    </span>
                  </div>
                  <div class="addr">
                    <span> <Icon type="md-pin" />{{ item.siteName }}</span>
                    <span class="details">
                      详情
                      <Icon type="ios-arrow-forward" />
                    </span>
                  </div>
                  <p class="infor">简介 {{ item.introduction || "暂无" }}</p>

                  <p class="infor">擅长 {{ item.domain || "暂无" }}</p>
                </div>
              </div>
            </div>
          </div>
          <empty v-else />
        </div>
        <div class="page" v-if="expertList.length > 1">
          <Page
            :total="total"
            @on-change="currentHandle"
            @on-page-size-change="sizeChange"
            :page-size="params.rows"
          />
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import * as experts from "@/api/experts.js";
import Footer from "@/components/footer/my_footer.vue";
export default {
  components: { Footer },
  data() {
    return {
      isList: 1, //1.橱窗 2.列表
      current: 0,
      params: {
        keyword: "",
        mobile: "",
        page: 1,
        qualification: 0,
        registerOpen: 0,
        rows: 10,
        sortField: "",
        sortType: "",
      },
      expertList: [],
      total: 0,
      screening: [
        { name: "综合排序", id: "comprehensive" },
        { name: "好评", id: "score" },
        { name: "热度", id: "hot" },
        { name: "销量", id: "sell" },
      ],
      //排序方式
      sortSearch: "comprehensive",
    };
  },
  mounted() {
    this.getExpertList();
  },
  methods: {
    handleShow(type) {
      this.isList = type;
    },
    sizeChange(size) {
      this.page.rows = size;
      this.getExpertList();
    },
    //获取当前页码
    currentHandle(current) {
      this.params.page = current;
      this.getExpertList();
    },

    toExpertDetails(id) {
      this.$router.push({
        name: "expertRegister",
        query: { id: id },
      });
    },
    //获取专家列表
    getExpertList() {
      experts.getExperts(this.params).then((res) => {
        const {
          code,
          result: { total, list },
        } = res;
        if (code == 200) {
          this.total = parseInt(total);

          this.expertList = list || [];
        }
      });
    },
    // 点击排序
    setSort(index) {
      this.current = index;
      if (this.screening[index].id === "comprehensive") {
        this.params.sortField = "";
        this.params.sortType = "";
      } else if (this.screening[index].id === "score") {
        this.params.sortField = "1";
        this.params.sortType = "desc";
      } else if (this.screening[index].id === "hot") {
        this.params.sortField = "2";
        this.params.sortType = "desc";
      } else {
        this.params.sortField = "3";
        this.params.sortType = "desc";
      }
      this.getExpertList();
    },
    //排序工具
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.attention-wrap {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  display: flex;
  flex-direction: column;
  padding: 0px calc(360 / 1920 * 100vw);
  padding-bottom: 50px;
  .title-box {
    padding: 18px 0;
  }

  .attention-content {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: calc(5 / 1920 * 100vw);

    .attention-list {
      padding: 19px 23px;
      margin-bottom: 10px;
      .attention-card {
        display: flex;
        align-items: center;
        border-radius: calc(5 / 1920 * 100vw);
        background-color: #f8f8f8;
        padding: 19px 23px;
        margin-bottom: 10px;
        cursor: pointer;
        .head-face {
          width: calc(86 / 1920 * 100vw);
          height: calc(86 / 1920 * 100vw);
          border-radius: calc(4 / 1920 * 100vw);
          background-size: cover;
        }
        .attention-info {
          width: calc(700 / 1920 * 100vw);
          margin-left: calc(20 / 1920 * 100vw);
          line-height: calc(28 / 1920 * 100vw);
          flex: 1;
          .name {
            display: flex;
            align-items: center;
            font-size: calc(18 / 1920 * 100vw);
            color: #333333;
          }
          .addr {
            font-size: calc(14 / 1920 * 100vw);
            margin: 5px 0;
          }
          .infor {
            color: #9a9a9a;
            max-width: 60%;
            overflow: hidden !important; //溢出内容隐藏
            text-overflow: ellipsis !important; //文本溢出部分用省略号表示
            display: -webkit-box !important; //特别显示模式
            -webkit-line-clamp: 1 !important; //行数
            line-clamp: 1 !important;
            -webkit-box-orient: vertical !important; //盒子中内容竖直排列
          }
          .score {
            margin: 0 calc(8 / 1920 * 100vw);
            display: inline-flex;
            align-items: center;
            .score-face {
              width: calc(12 / 1920 * 100vw);
              height: calc(13 / 1920 * 100vw);
            }
            > span {
              font-size: calc(14 / 1920 * 100vw);
              margin-left: calc(4 / 1920 * 100vw);
            }
          }
          .describe {
            color: #9a9a9a;
            font-size: calc(14 / 1920 * 100vw);
            text-overflow: -o-ellipsis-lastline !important;
            overflow: hidden !important; //溢出内容隐藏
            text-overflow: ellipsis !important; //文本溢出部分用省略号表示
            display: -webkit-box !important; //特别显示模式
            -webkit-line-clamp: 2 !important; //行数
            line-clamp: 2 !important;
            -webkit-box-orient: vertical !important; //盒子中内容竖直排列
          }
        }
        .head-box {
          display: flex;
          align-items: center;
          color: #9a9a9a;
          > span {
            font-size: calc(14 / 1920 * 100vw);
            margin-right: 16px;
          }
          .price {
            color: #fd5151;
          }
        }
        .attention-btn {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 84px;
          height: 34px;
          background: #fd5151;
          color: #fff;
          font-size: 14px;
          border-radius: 4px;
          cursor: pointer;
        }
      }
    }
    .page {
      position: absolute;
      right: calc(40 / 1920 * 100vw);
      bottom: 5px;
    }
    .sort {
      display: flex;
      margin-top: calc(11 / 1920 * 100vw);
      margin-left: auto;
      justify-content: space-between;
      padding-bottom: 20px;
      .sort-text {
        display: flex;
      }
      .sort-row {
        display: inline-flex;
        align-items: center;
        margin-left: calc(30 / 1920 * 100vw);
        cursor: pointer;
        .title {
          font-size: calc(14 / 1920 * 100vw);
        }
        .sort-img {
          width: calc(7 / 1920 * 100vw);
          height: calc(11 / 1920 * 100vw);
          margin-left: calc(4 / 1920 * 100vw);
        }
      }
      .sort-row:first-of-type {
        margin-left: calc(0 / 1920 * 100vw);
      }
    }
  }

  .details {
    cursor: pointer;
  }
  .activeStyle {
    color: #f4333c;
  }
  .tabs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    cursor: pointer;
    img {
      width: 18px;
      height: 16px;
      margin-right: 5px;
    }
  }

  // 橱窗样式
  .mycourse-list {
    display: flex;
    flex-wrap: wrap;
    //   justify-content: space-between;

    .mycourse-item {
      width: 19%;
      margin: 0 1% 20px 0;
      background: #ffffff;
      box-shadow: 0px 4px 10px 0px #efeded;
      border-radius: 5px;
      padding-bottom: 10px;
      cursor: pointer;
      .mycourse-img {
        height: 170px;
        overflow: hidden;
        border-radius: 5px 5px 0 0;
        background-size: cover;
        cursor: pointer;
      }
      .mycourse-info {
        display: flex;
        padding: 14px 10px 0 10px;
        min-height: 30px;
        .text {
          margin-bottom: 14px 10px 0 14px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          -ms-text-overflow: ellipsis;
          text-overflow: ellipsis;
          cursor: pointer;
        }
      }
      .price-box {
        padding: 0 10px;
        margin: 5px 0px;
        span {
          .price {
            color: #f4333c;
          }
          &:first-child {
            margin-right: 10px;
          }
        }
      }

      .infor {
        padding: 0 10px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
      }
      .score {
        margin: 0 calc(8 / 1920 * 100vw);
        .score-face {
          width: calc(12 / 1920 * 100vw);
          height: calc(13 / 1920 * 100vw);
        }
        > span {
          font-size: calc(14 / 1920 * 100vw);
          margin-left: calc(4 / 1920 * 100vw);
        }
      }
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
</style>
